<!DOCTYPE html>
<<<<<<< HEAD
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* 整体页面样式 */
    body {
      font-family: Arial, sans-serif;
      /* 替换为支持跨域的图片链接 */
      background-image: url("https://p5.img.cctvpic.com/photoworkspace/contentimg/2023/03/30/2023033011303020756.jpg");
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;

    }

    /* 登录表单容器样式 */
    #login-container {
      background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
      padding: 30px 40px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      width: 350px;
    }

    /* 标题样式 */
    h1 {
      color: #333;
      text-align: center;
      margin-bottom: 30px;
      font-size: 28px;
      font-weight: bold;
      letter-spacing: 1px;
    }

    /* 表单内每个div的样式 */
    div {
      margin-bottom: 20px;
    }

    /* 标签样式 */
    label {
      display: block;
      margin-bottom: 8px;
      color: #555;
      font-size: 16px;
      font-weight: 500;
    }

    /* 输入框样式 */
    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-sizing: border-box;
      font-size: 16px;
      transition: border-color 0.3s ease;
    }

    /* 输入框聚焦时的样式 */
    input:focus {
      border-color: #007BFF;
      outline: none;
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
    }

    /* 按钮样式 */
    button {
      background: #007BFF;
      color: white;
      border: none;
      padding: 12px 15px;
      border-radius: 6px;
      cursor: pointer;
      width: 100%;
      font-size: 18px;
      font-weight: 500;
      transition: background-color 0.3s ease;
    }

    /* 按钮悬停时的样式 */
    button:hover {
      background: #0056b3;
    }

    /* 提示信息样式 */
    #message {
      color: red;
      text-align: center;
      margin-top: 10px;
      font-size: 16px;
    }
  </style>
  <script>
    $(function () {
      // 绑定表单提交事件
      $("#login-form").submit(function (e) {
        e.preventDefault(); // 阻止表单默认提交行为

        var username = $("#user").val();
        var password = $("#password").val();

        if (username.trim() === "" || password.trim() === "") {
          alert("请输入用户名和密码才能进行登录");
          return;
        }

        // 执行异步 HTTP (Ajax) 请求
        $.ajax({
          url: "/user/login1", // 指定路径
          data: { "username": username, "password": password },
          type: "POST",
          dataType: "json", // 服务器返回数据为json
          success: function (data) {
            console.log(data);
            if (data.status == 0) {
              alert("登录成功！");
              window.location.href = "list.html";
            } else {
              alert("登录失败，账号或密码错误，请重试！");
              $("#message").text("账号或密码错误，请重试!");
              $("#user").val("");
              $("#password").val("");
            }
          }
        });
      });
    });
  </script>
</head>

<body>
<div id="login-container">
  <h1>登录</h1>
  <form id="login-form" action="javascript:void(0);">
    <div>
      <label for="user">用户名:</label>
      <input type="text" id="user" name="username" placeholder="请输入用户名" required>
    </div>
    <div>
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" placeholder="请输入密码" required>
    </div>
    <button type="submit">登录</button>
  </form>
  <p id="message"></p>
</div>
=======
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body>
    <div class="container-login">
        <div class="container-pic">
            <img src="pic/computer.png" width="350px">
        </div>
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" name="userName" id="userName" class="form-control">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" name="password" id="password" class="form-control">
            </div>
            <div class="row">
                <button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        function login() {
            $.ajax({
                url:"User/login",
                type:"post",
                data:{
                    username:$("#userName").val(),
                    password:$("#password").val()
                },
               success:function (){
                   location.href = "book_list.html?pageNum=1";
               }
            })
        }
    </script>
>>>>>>> dbc64144405dd32d2801860ae1917f7f55a87d1c
</body>

</html>